<template>
  <div class="role">
    <div class="search">
      <page-search :searchFormConfig="formConfig"></page-search>
    </div>
    <div class="tontent">
      <page-content
        :contentTableConfig="contentTableConfig"
        pageName="role"
      ></page-content>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onUnmounted } from 'vue'

import { contentTableConfig } from './config/content.config'
import { formConfig } from './config/search.config'

import PageContent from '@/components/page-content'
import PageSearch from '@/components/page-search'

export default defineComponent({
  components: { PageContent, PageSearch },
  name: 'role',
  setup() {
    onUnmounted(() => {
      console.log('组件销毁了')
    })
    return {
      contentTableConfig,
      formConfig
    }
  }
})
</script>

<style scoped lang="less">
.role {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  background: #f0f2f5;
  padding: 10px;
  display: flex;
  flex-direction: column;
  .search {
    background: #fff;
    padding: 10px 10px 0 0;
  }
  .tontent {
    margin-top: 10px;
    height: 0;
    overflow: auto;
    flex: 1;
  }
}
</style>
